<template>
	<view id="profitDetail">
		<div class="machineTop">
			<div class="month">
				<div class="monthList">
					产品名称: {{pName}}
				</div>
				<div class="monthList">
					<span>累计收益: {{sum.totalMoney }}</span>
					<span>机器数量: {{sum.stockSize}}</span>
				</div>
				<div class="s-flex-r-s-c flex-wrap">
					<span style="width: 50%;">分润收益: {{sum.fenrun}}</span>
					<span style="width: 50%;" class="align-r">机具返现收益: {{sum.callBack}}</span>
					<!-- <span style="width: 50%;">流量费返现收益: {{sum.callBackFlow}}</span> -->
				</div>
			</div>
		</div>
		<div class="productTitle">{{pName}}收益近半年走势图</div>
		<view style="background-color: #FFF;padding:20rpx 0;">
			<qiun-data-charts class="dataChart" style="min-height:500rpx;" type="line" :opts="chartConfig"
				:chartData="chartData" />
		</view>
		<me-tabs class="dataBar" style="margin-top:10rpx" v-model="operIndex" :tabs="operList"
			@change="operChange"></me-tabs>
		<view style="display:flex;align-items: center;margin-bottom:1px;">
			<view style="flex:1">
				<view class="arrow"
					style="display:flex;position: relative;background-color: #FFF;padding:15rpx 30rpx;margin-top:5rpx;border-right:1px solid #EEE;">
					状态：<m-picker :dataList="typeList" text="dictLabel" name="dictValue" v-model="type" style="flex:1"
						@change="typeChange" />
				</view>
			</view>
			<view style="flex:1">
				<picker mode="date" :value="month" fields='month' @change="monthChange">
					<view class="arrow"
						style="position: relative;background-color: #FFF;padding:15rpx 30rpx;margin-top:5rpx;">
						<text>月份：</text>
						<text :style="month?'':'color:#888;'">{{month?month:'请选择'}}</text>
					</view>
				</picker>
			</view>
		</view>



		<uni-collapse accordion v-model="accordionVal" style="padding-bottom: 140rpx;">
			<checkbox-group @change="checkChange">
				<view class="dataNav" v-for="(item,index) in items" :key="index">
					<view class="up s-flex-r-s-c">
						<checkbox class="up-checked" v-if="item.status==0" :value="item.id" :checked="item.check"
							activeBackgroundColor="#39ACFF" iconColor="#ffffff" style="transform:scale(0.7)" />
						<view class="r">
							<view class="dataLine">
								<view class="label" :class="item.status==0?'up-label':''">月份：</view>
								<view class="data">{{operIndex==1?item.t0:item.a0}}</view>
							</view>
							<view class="dataLine">
								<view class="label" :class="item.status==0?'up-label':''">平台：</view>
								<view class="data">{{operIndex==1?item.t1:item.a1}}</view>
							</view>
							<view class="dataLine">
								<view class="label" :class="item.status==0?'up-label':''">状态：</view>
								<view class="data">
									<view style="display:flex;align-items: center;">
										<text class="dotted3" :class="item.status==0?'yellow-bg':''"></text>
										<text
											:class="item.status==0?'yellow':''">{{typeList.find(i=>i.dictValue==item.status)&&typeList.find(i=>i.dictValue==item.status).dictLabel}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-collapse-item title="  " style="margin-top:-90rpx;">
						<view class="dataLine">
							<view class="label">类型：</view>
							<view class="data">{{operIndex==1?item.t2:item.a2}}</view>
						</view>
						<view class="dataLine">
							<view class="label">合作商编号：</view>
							<view class="data">{{operIndex==1?item.t3:item.a3}}</view>
						</view>
						<view class="dataLine">
							<view class="label">合作商名称：</view>
							<view class="data">{{operIndex==1?item.t4:item.a4}}</view>
						</view>
						<view class="dataLine">
							<view class="label">合计金额：</view>
							<view class="data">{{operIndex==1?item.t7:item.a7}}</view>
						</view>

						<view class="dataLine">
							<view class="label">调整金额：</view>
							<view class="data">{{operIndex==1?item.t40:item.a40}}</view>
						</view>


						<view class="dataLine">
							<view class="label">开票类型：</view>
							<view class="data">{{operIndex==1?item.t12:item.a12}}</view>
						</view>
						<view class="dataLine">
							<view class="label">实发金额：</view>
							<view class="data">{{operIndex==1?item.t22:item.a22}}</view>
						</view>
						<view class="dataLine">
							<view class="label">发放时间：</view>
							<view class="data">{{operIndex==1?item.t23:item.a23}}</view>
						</view>
						<view class="dataLine">
							<view class="data">
								<view class="operBtn" @click='daiCheck(item.id)' v-if="item.status == 0">核对</view>
							</view>
							<view class="data">
								<view class="operBtn" style="background-color: #004AFF;" @click='deatils(item.id)'>详情
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</view>
			</checkbox-group>


		</uni-collapse>

		<uni-popup ref="tyeSure">
			<view class="popBox" style="background-color: #FFF;width:600rpx;border-radius: 10rpx;">
				<view class="dataNav" style="padding:20rpx;">
					<view style="padding:20rpx 0;text-align:center">确认开票类型</view>
					<view class="dataLine">
						<view class="label">开票类型：</view>
						<view class="data arrow">
							<m-picker :dataList="sureType" text="name" name="id" v-model="sureValue" />
						</view>
					</view>
				</view>
				<view class="dataLine" style="text-align: center;border-top:1rpx solid #EEE;">
					<view class="data" style="border-right:1rpx solid #EEE;padding:15rpx 0;">
						<view @click='$refs.tyeSure.close()'>取消</view>
					</view>
					<view class="data" style="padding:10rpx 0">
						<view @click='surePiao()'>确认</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="btns s-flex-r-b-c" v-if="show">
			<view class="l s-flex-r-s-c">
				<u-button class="btn btn1" size="medium" @click="selectAll">全选</u-button>
				<u-button class="btn btn2" size="medium" @click="cancelSelect">退出勾选</u-button>
			</view>
			<view class="r s-flex-r-b-c">
				<text class="text-num">已勾选：{{items.filter(i=>i.check).length}}</text>
				<u-button class="btn btn2" size="medium" @click="batchVerification">批量核对</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accordionVal: '',
				operList: ["分润核对",'机具返现'],
				// operList: ["分润核对",'机具返现','流量费返现'],
				operIndex: 0,

				typeList: [],
				type: '',


				month: '',
				show: false,
				profit_type: '',
				pName: '',
				proId: '',

				sum: {
					totalMoney: '',
					stockSize: '',
					fenrun: '',
					callBack: '',
				},
				list: [],

				items: [],
				showIndex: -1,
				showToast2: false, //开票确认
				sureType: [], //开票类型的列表
				kaipiaojine: 0, //开票金额
				sureValue: '',
				sureIndex: 0,
				cashId: '',


				chartConfig: {
					legend: {
						show: false //是否显示图例
					},
					xAxis: {
						fontSize: 12,
						calibration: true
					}
				},
				chartData: {
					categories: [],
					series: []
				},
				kpTypeList: [], //开票类型
				kpId: ''
			}
		},
		onLoad(option) {
			this.pName = option.name
			this.profit_type = option.type
			this.proId = option.id
			this.month = option.month
			this.getStatusList()
		},
		onShow() {
			this.getProfitData()
			this.profitList()
		},
		methods: {
			checkChange(e) {
				this.show = true
				this.items.forEach(i => {
					if (i.status == 0) {
						i.check = false
					}
				})
				e.detail.value.map(i => {
					this.items.find(j => j.id == i).check = true;
				})
					console.log('this.items: ', this.items)
			},
			// 全选
			selectAll() {
				this.items.forEach(i => {
					if (i.status == 0) {
						i.check = true
					}
				})
			},
			// 退出勾选
			cancelSelect() {
				this.items.forEach(i => {
					if (i.status == 0) {
						i.check = false
					}
				})
				this.show = false
				this.$forceUpdate()
			},
			// 批量核对
			batchVerification() {
				const checkList = this.items.filter(i => i.check)
					console.log('checkList: ', checkList)
				if(checkList.length){
					this.daiCheck(checkList.map(i=>i.id).join())
				} else {
					this.$toast("请勾选核对项")
				}
			},
			getStatusList() {
				this.httpClient.post('system/agentApp/index/getDictData', {
					dictType: "fi_profitsum_status",
				}).then(res => {
					this.typeList = res.data
				})
			},
			monthChange(e) {
				this.month = e.detail.value
			},
			typeChange(e) {
				this.profitList()
			},
			monthChange(e) {
				this.month = e.detail.value
				this.profitList()
			},
			operChange(e) {
				this.operIndex = e;
				this.showIndex = -1;
				this.items = [];
				//this.showToast2 = false;
				this.type = ''
				this.profitList();
			},
			getProfitData() {
				this.httpClient.post('profit/app/profitSum/tableData', {
					proId: this.proId,
					profitType: this.profit_type
				}).then(res => {
					if (res.code == 200) {
						this.chartData = {
							categories: res.data.mon,
							series: [{
								name: '收益',
								data: res.data.data
							}]
						}
						this.sum = res.data.sum
					}
				})
			},
			profitList() {
				let that = this
				if (that.operIndex == 1) {//机具返现核对
					this.httpClient.post('profit/app/calculateReentry/getListAll', {
						t0: this.month,
						productId: this.proId,
						status: this.type
					}).then(res => {
						if (res.code == 200) {
							that.items = res.data.list.map(i => {
								i.check = false
								i.id = i.id + ''
								return i
							})
						}
					})
				}else if (that.operIndex == 2) { //流量费返现核对
					this.httpClient.post('profit/app/profitSum/getListAllFlow', {
						t0: this.month,
						productId: this.proId,
						status: this.type
					}).then(res => {
						if (res.code == 200) {
							that.items = res.data.list.map(i => {
								i.check = false
								i.id = i.id + ''
								return i
							})
						}
					})
				} else {
					this.httpClient.post('profit/app/profitSum/getListAll', { // 分润核对
						a0: this.month,
						productId: this.proId,
						status: this.type
					}).then(res => {
						if (res.code == 200) {
							that.items = res.data.list.map(i => {
								i.check = false
								i.id = i.id + ''
								return i
							})
						}
					})
				}
			},
			deatils(id) {
				if (this.operIndex == 1) {
					uni.navigateTo({
						url: 'profitCashDetail?id=' + id
					})
				} else {
					uni.navigateTo({
						url: 'profitShareDetail?id=' + id
					})
				}
			},
			daiCheck(id) {
				this.cashId = id
				this.$refs.tyeSure.open()
				this.httpClient.post('profit/app/fiKpTypeApp/sureType', {}).then(res => {
					this.sureType = res.data
				})
			},
			surePiao() {
				if (!this.sureValue) {
					uni.showToast({
						title: '请选择结算价',
						icon: 'none'
					})
				} else {
					this.$refs.tyeSure.close()
					if (this.operIndex == 1) {
						this.httpClient.post('profit/app/calculateReentry/shenhe', {
							ids: this.cashId,
							id: this.sureValue
						}).then(res => {
							uni.showToast({
								title: '核对成功',
								icon: 'none'
							})
							this.show = false
							setTimeout(() => {
								this.profitList()
							}, 1500)
						})
					} else {
						this.httpClient.post('profit/app/profitSum/shenhe', {
							ids: this.cashId,
							id: this.sureValue
						}).then(res => {
							uni.showToast({
								title: '核对成功',
								icon: 'none'
							})
							this.show = false
							setTimeout(() => {
								this.profitList()
							}, 1500)
						})
					}
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.up-checked {
		margin-left: 34rpx;
	}

	.btns {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #3aacff;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		color: #FFF;

		.btn {
			margin: 0 !important;
			color: #3aacff;
		}

		.btn1 {
			width: 80rpx !important;
			padding: 0 60rpx !important;
			margin-right: 20rpx !important;
		}

		.btn2 {
			width: 140rpx !important;
			padding: 0 60rpx !important;
		}

		.text-num {
			margin-right: 30rpx;
		}
	}

	#profitDetail {
		.machineTop {
			padding: 1rem;
			background: #fff;
			color: #fff;
		}

		.showLeft .state1 {
			color: #3aacff;
		}

		.showLeft .state2 {
			color: #f0ad4e;
		}

		.showLeft .state3 {
			color: #4cd964;
		}

		.machineTop .month {
			background: #3aacff;
			padding: 1rem 1rem;
			border-radius: 0.6rem;
			font-size: 0.95rem;
		}

		.machineTop .monthList {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.productTitle {
			height: 3rem;
			padding-left: 1rem;
			font-size: 0.95rem;
			line-height: 3rem;
		}

		.tab {
			height: 2.5rem;
			display: flex;
			align-items: center;
			/*border-bottom: 1px solid #f2f2f2;*/
		}

		.tab .tabItem {
			flex: 1;
			line-height: 2.5rem;
			text-align: center;
			background: #eee;
		}

		.tab .tabActon {
			background: #3aacff;
			color: #fff;
		}

		.materialList {
			background: #fff;
			padding: 0.5rem 0.9rem;
			font-size: 0.875rem;
			border-bottom: 1px solid #e5e5e5;
		}

		.materialList .showMsg {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.materialList .showRight {
			width: 1rem;
		}

		.materialList .btn {
			text-align: right;
		}

		.btn span {
			display: inline-block;
			padding: 0.3rem 1rem;
			background: #3aacff;
			color: #fff;
			border-radius: 0.3rem;
		}

		.btn span:last-child {
			margin-left: 0.8rem;
		}

		.checkBox .weui-dialog {
			max-width: 20rem !important;
			width: 20rem !important;
		}

		.checkBox .weui-mask {
			background: rgba(0, 0, 0, 0.7);
		}

		.checkBox .weui-dialog {
			background: none;
		}

		.check {
			position: relative;
			/*left: 50%;*/
			/*top: 50%;*/
			/*transform: translate(-50%, -50%);*/
			background: rgba(255, 255, 255, 1);
			width: 20rem;
			padding: 0rem 0;
			overflow: hidden;
			border-radius: 0.2rem;


		}

		.check .title {
			font-size: 1rem;
			line-height: 3rem;
			padding-left: 0.8rem;
			/*text-align: left;*/
		}

		.check .content {
			text-align: left;
			padding-left: 0.8rem;
			padding-bottom: 1.5rem;
		}

		.check .type {
			display: flex;
			/*align-items: center;*/
		}

		.check .money span {
			margin-right: 1rem;

		}

		.check .type span {
			margin-right: 1rem;
			display: inline-block;
			height: 3rem;
		}

		.check .type .typeList {
			/*display: inline-block;*/
			display: flex;
			align-items: center;
			height: 2rem;
			/*margin-left: 3rem;*/
		}

		.typeList img {
			width: 1.5rem;
		}

		.check .btn {
			margin-top: 0.8rem;
			text-align: right;
			padding-right: 1rem;
		}

		.dataBar {
			background: transparent;
		}

		.dataNav {
			padding: 10rpx 0;
			background: #FFF;

		}

		.dataLine {
			position: relative;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			padding: 5rpx 0;

			.label {
				width: 200rpx;
				text-align: right;
				color: #888;
			}

			.data {
				position: relative;
				flex: 1;
			}

			.operBtn {
				background: #FFA500;
				color: #FFF;
				margin: 10rpx 30rpx;
				text-align: center;
				border-radius: 15rpx;
				padding: 10rpx;
			}
		}

		.up-label {
			width: 100rpx !important;
			text-align: right;
			color: #888;
		}

		.dotted1 {
			background-color: #3aacff;
			border-radius: 10rpx;
			width: 10rpx;
			height: 10rpx;
			padding: 10rpx;
			margin-right: 10rpx;
		}

		.dotted2 {
			background-color: #FF3500;
			border-radius: 10rpx;
			width: 10rpx;
			height: 10rpx;
			padding: 10rpx;
			margin-right: 10rpx;
		}

		.dotted3 {
			background-color: #CCC;
			border-radius: 10rpx;
			width: 10rpx;
			height: 10rpx;
			padding: 10rpx;
			margin-right: 10rpx;
		}

		.yellow-bg {
			background-color: #FA9C3C;
		}

		.yellow {
			color: #FA9C3C;
		}
	}
</style>